import React from 'react';
import {Button, Form, Input, message} from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {LoginApi} from "../request/api";
import {Link, useNavigate} from "react-router-dom"
// 引入解析token方法
import jwt_decode from 'jwt-decode'
// 引入设置token方法
import setAuthToken from '../utils/AuthToken'

import "./less/Login.less";
import logoImg from "../assets/logo.png";
import backImg from "../assets/backimg.jpg"


export default function Login() {

       
    const navigate=useNavigate()
    const onFinish = (values) => {
        LoginApi({
            account: values.account,
            password: values.password,
        }).then(res  =>{
            if(res.code===200){
                const token=res.data;
                message.success("登录成功！");
                localStorage.setItem('id',res.data.id)
                localStorage.setItem('avatar',res.data.avatar)
                localStorage.setItem('token',res.data.token)
                 //解析token
                //  const decode=jwt_decode(token)
                //  localStorage.setItem("id",decode.UserId)
                 
                //  localStorage.setItem('player',res.data.player)
                localStorage.setItem('username',res.data.nickname)
                setTimeout(()=>navigate('/index/listArticle'),1500)
            }else {
                message.error(res.msg);
            }
        })//跨域
    };

    return (

        <div className='login'>
            <div className="login_box">
          
                <img src={logoImg} alt="" className='imgs'/>
                <Form
                    name="basic"

                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        name="account"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名',
                            },
                        ]}
                    >
                        <Input className='input' size="large" prefix={<UserOutlined />} placeholder="请输入用户名"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                    >
                        <Input.Password className='input' size="large" prefix={<LockOutlined />} placeholder="请输入密码"/>
                    </Form.Item>
                    <Form.Item>
                        <Link to="/register">还没有账号？立即注册</Link>
                    </Form.Item>

                    <Form.Item>
                        <Button className='input' size="large" type="primary" htmlType="submit" block>
                            登录
                        </Button>
                    
                    </Form.Item>
                </Form>
            </div>  
        </div>
        
    );
}
